<template>
  <div class="apply-container">
    <header class="app-header">
      <div class="nav-container">
        <div class="logo-title">
          <img :src="require('@/assets/picture/0.jpg')" alt="系统Logo" class="logo" />
          <div class="system-title">DLNU奖学金管理系统</div>
        </div>
        <nav>
          <ul>
            <li><router-link to="/fst">首页</router-link></li>
            <li><router-link to="/announcement">公告通知</router-link></li>
            <li><a href="/awards.pdf" target="_blank">评选制度</a></li>
            <li><router-link to="/winners">获奖名单</router-link></li>
          </ul>
        </nav>
      </div>
    </header>

       <el-container style="height: calc(100vh - 80px);">
      <el-aside width="220px" class="sidebar">
        <el-menu
          :default-active="activeModule"
          @select="handleSelect"
          :router="false"
          unique-opened
          class="el-menu-vertical-demo"
          :collapse="false"
          :collapse-transition="false"
        >
          <el-menu-item index="personal">个人信息</el-menu-item>
          <el-menu-item index="academic">学业成绩</el-menu-item>
          <el-menu-item index="moral">思政表现</el-menu-item>
          <el-menu-item index="researchOutput">科研成果</el-menu-item>
          <el-menu-item index="researchProject">科研项目</el-menu-item>
          <el-menu-item index="competition">学科竞赛</el-menu-item>
          <el-menu-item index="service">社会服务</el-menu-item>
          <el-menu-item index="summary">奖学金申请分数概况</el-menu-item>
        </el-menu>
      </el-aside>

    
      <el-main class="main-content">
        <keep-alive>
          <component :is="currentComponent" />
        </keep-alive>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import PersonalForm from './Modules/PersonalForm.vue'
import AcademicForm from './Modules/AcademicForm.vue'
import MoralForm from './Modules/MoralForm.vue'
import ResearchOutputForm from './Modules/ResearchOutputForm.vue'
import ResearchProjectForm from './Modules/ResearchProjectForm.vue'
import CompetitionForm from './Modules/CompetitionForm.vue'
import ServiceForm from './Modules/ServiceForm.vue'
import SummaryForm from './Modules/SummaryForm.vue'

export default {
  name: 'ApplyStu',
  data() {
    return {
      activeModule: 'personal',
      componentsMap: {
        personal: PersonalForm,
        academic: AcademicForm,
        moral: MoralForm,
        researchOutput: ResearchOutputForm,
        researchProject: ResearchProjectForm,
        competition: CompetitionForm,
        service: ServiceForm,
        summary: SummaryForm,
      },
    }
  },
  computed: {
    currentComponent() {
      return this.componentsMap[this.activeModule] || PersonalForm
    },
  },
  methods: {
    handleSelect(key) {
      this.activeModule = key
    },
  },
}
</script>

<style scoped>
.apply-container {
  height: 100vh;
}
.sidebar {
  background-color: #f0f2f5;
  height: 100vh;
  border-right: 1px solid #dcdfe6;
}
.main-content {
  padding: 20px;
  overflow-y: auto;
  height: 100vh;
  background-color: #fff;
}
.app-header {
  background-color: #1e3a8a;
  color: white;
  padding: 15px 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-container {
  width: 95%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo-title {
  display: flex;
  align-items: center;
  gap: 15px;
}

.logo {
  height: 50px;
  object-fit: contain;
}

.system-title {
  font-size: 24px;
  font-weight: bold;
}

nav ul {
  display: flex;
  list-style: none;
  gap: 25px;
  margin: 0;
  padding: 0;
}

nav a {
  color: white;
  text-decoration: none;
  font-size: 16px;
  padding: 5px 0;
  position: relative;
  transition: color 0.3s;
}

nav a:hover {
  color: #93c5fd;
}

nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #93c5fd;
  transition: width 0.3s;
}

nav a:hover::after {
  width: 100%;
}

</style>
